<template>
    <div class="right">
        <div class="right_header">
            <div class="title">万号来电</div>
            <div class="title_body">
                <span v-for="(item, index) in callNum" :key="index">{{ item }}</span>
            </div>
            <div class="title">转译完成百分比</div>
            <div class="title_body">
                <!-- 转译数：<i>{{ zhanYi | num }}</i> -->
                转译数：<i>{{ formatNumber(zhanYi) }}</i>
            </div>
            <div class="BarBox" ref="BarBox"></div>
        </div>
        <div class="anHui">
            <div class="title">全省视图</div>
            <div class="mapBox" ref="mapBox"></div>
            <div class="city_box">
                <el-select popper-class="selectBox" @change="changeValue(cityValue)" v-model="cityValue" class="m-2"
                    placeholder="Select" size="small" transfer="true" :popper-append-to-body="false" clearable>
                    <el-option v-for="item in cityData" :key="item.value" :label="item.name" :value="item.name" />
                </el-select>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ElSelect } from 'element-plus';
import * as echarts from "echarts";
import JSONanhui from "@/assets/anhui.json";
import anQing from "@/assets/map/安庆市.Json";
import bengBU from "@/assets/map/蚌埠市.Json";
import heFei from "@/assets/map/合肥市.Json";
echarts.registerMap("安徽", JSONanhui);
echarts.registerMap("heFei", heFei);
echarts.registerMap("bengBU", bengBU);
echarts.registerMap("anQing", anQing);
import { ref, reactive, onMounted, computed, markRaw } from "vue";
let callNum = ref("851627")
let zhanYi = ref(596139)
let barCharts = ref(null)
let BarBox = ref()
let mapBox = ref()
let map = ref(null)
let mapName = ref(null)
mapName.value = '安徽'
let cityData = reactive([
    {
        value: "265",
        name: "合肥市",
        itemStyle: { normal: { areaColor: "#ff0000" } },
    },
    {
        value: "563",
        name: "宣城市",
        itemStyle: { normal: { areaColor: "#ffff33" } },
    },
    {
        value: "552",
        name: "蚌埠市",
        itemStyle: { normal: { areaColor: "#ffff33" } },
    },
    {
        value: "564",
        name: "六安市",
        itemStyle: { normal: { areaColor: "#ffff33" } },
    },
    {
        value: "553",
        name: "芜湖市",
        itemStyle: { normal: { areaColor: "#d99694" } },
    },
    {
        value: "554",
        name: "淮南市",
        itemStyle: { normal: { areaColor: "#d99694" } },
    },
    {
        value: "566",
        name: "池州市",
        itemStyle: { normal: { areaColor: "#edd900" } },
    },
    {
        value: "555",
        name: "马鞍山市",
        itemStyle: { normal: { areaColor: "#d99694" } },
    },
    {
        value: "556",
        name: "安庆市",
        itemStyle: { normal: { areaColor: "#d99694" } },
    },
    {
        value: "557",
        name: "宿州市",
        itemStyle: { normal: { areaColor: "#edd900" } },
    },
    {
        value: "558",
        name: "阜阳市",
        itemStyle: { normal: { areaColor: "#0070bc" } },
    },
    {
        value: "560",
        name: "亳州市",
        itemStyle: { normal: { areaColor: "#0070bc" } },
    },
    {
        value: "559",
        name: "黄山市",
        itemStyle: { normal: { areaColor: "#0070bc" } },
    },
    {
        value: "550",
        name: "滁州市",
        itemStyle: { normal: { areaColor: "#0070bc" } },
    },
    {
        value: "561",
        name: "淮北市",
        itemStyle: { normal: { areaColor: "#0070bc" } },
    },
    {
        value: "1562",
        name: "铜陵市",
        itemStyle: { normal: { areaColor: "#0070bc" } },
    },
])
let cityValue = ref("")
let callNumPlus = ref(null)
let zhanYiPlus = ref(null)
let yesterdayCallNum = ref(851627)
let yesterdayZhanYi = ref(596139)
let maps = reactive([
    { name: "全省", ping: "anHui" },
    { name: "安庆市", ping: "anQing" },
    { name: "蚌埠市", ping: "bengBU" },
    { name: "亳州市", ping: "boz" },
    { name: "池州市", ping: "chiz" },
    { name: "滁州市", ping: "chuz" },
    { name: "阜阳市", ping: "fuy" },
    { name: "合肥市", ping: "heFei" },
    { name: "淮北市", ping: "hbei" },
    { name: "淮南市", ping: "hnan" },
    { name: "黄山市", ping: "hshan" },
    { name: "六安市", ping: "luan" },
    { name: "马鞍山市", ping: "mas" },
    { name: "宿州市", ping: "suz" },
    { name: "铜陵市", ping: "tling" },
    { name: "芜湖市", ping: "wuh" },
    { name: "宣城市", ping: "xc" },
],)
const setplus = () => {
    let nowData = parseInt(callNum.value);
    let nowZhuanYi = zhanYi.value
    // 外呼数++
    callNumPlus.value = setInterval(() => {
        let temp = parseInt(callNum.value) + Math.round(Math.random() * 10);
        if (temp - nowData > yesterdayCallNum.value) {
            callNum.value = nowData + yesterdayCallNum.value;
            callNumPlus.value = null;
            return;
        }
        callNum.value = temp + "";
    }, 3000);
    // 转译数++
    zhanYiPlus.value = setInterval(() => {
        zhanYi.value += Math.round(Math.random() * 10);
        if (zhanYi.value - nowZhuanYi > yesterdayZhanYi.value) {
            zhanYi.value = nowZhuanYi + yesterdayZhanYi.value;
            zhanYiPlus.value = null;
            return;
        }
    }, 2000);
}
function formatNumber(num) {
    // console.log("num===", num);
    return String(num).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
const options1 = () => {
    let option = {
        grid: {
            // 直角坐标系内绘图网格
            left: "40",
            top: "0",
            right: "20",
            bottom: "0",
            containLabel: true,
        },
        xAxis: {
            type: "value",
            data: ["Mon"],
            splitLine: { show: false }, //坐标轴在 grid 区域中的分隔线
            axisLabel: { show: false }, //坐标轴刻度标签
            axisTick: { show: false }, //坐标轴刻度
            axisLine: { show: false }, //坐标轴轴线
        },
        yAxis: {
            type: "category",
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
                show: false,
            },
            data: ["a"],
        },
        series: [
            {
                name: "%",
                type: "bar",
                barWidth: 19,
                data: [`${((zhanYi.value / callNum.value) * 100).toFixed(2)}`],
                label: {
                    //图形上的文本标签
                    show: true,
                    position: "right", //标签的位置
                    offset: [0, -20], //标签文字的偏移，此处表示向上偏移40
                    formatter: "{c}{a}", //标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
                    color: "#fff", //标签字体颜色
                    fontSize: 20, //标签字号
                },
                itemStyle: {
                    //图形样式
                    normal: {
                        barBorderRadius: 10,
                        color: new echarts.graphic.LinearGradient(
                            1,
                            0,
                            0,
                            0,
                            [
                                {
                                    //代表渐变色从正上方开始
                                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                                    color: "rgb(3,174,253)",
                                }, //柱图渐变色
                                {
                                    offset: 1, //指100%处的颜色
                                    color: "rgb(223,3,147)",
                                },
                            ]
                        ),
                    },
                },
                zlevel: 1,
            },
            {
                name: "进度条背景",
                type: "bar",
                barGap: "-102%",
                barWidth: 20,
                data: [110],
                color: "#fff",
                itemStyle: {
                    normal: {
                        barBorderRadius: 10,
                        borderColor: "rgb(3, 154, 225)",
                        borderWidth: 2,
                    },
                },
            },
        ],
    };
    return option;
}
const options2 = () => {
    let colorData = cityData.map((d) => d.itemStyle.normal.areaColor);
    // console.log("colorData",colorData);
    // let cityData = this.cityData;
    let option = {
        color: colorData,
        geo: {
            map: mapName.value,
            roam: false, //不开启缩放和平移
            zoom: 1.23, //视角缩放比例
            label: {
                normal: {
                    show: true,
                    fontSize: "10",
                    color: "rgba(255,255,255,0.8)",
                },
            },
            regions: colorData,
        },
        tooltip: {
            trigger: "item",
            formatter: "{a}<br/>{b}:{c}",
        },
        dataRange: {
            show: false,
            min: 0.5,
            max: 17.1,
            x: "left",
            y: "bottom",
            text: ["高", "低"], // 文本，默认为数值文本
            calculable: true,
            color: ["lightskyblue", "#9F79EE", "lightskyblue"],
            textStyle: { color: "#FFFFFF" },
        },
        series: [
            {
                name: mapName.value,
                type: "map",
                mapType: mapName.value,
                hoverable: true,
                dataRangeHoverLink: true,
                zoom: 1.2,
                selectedMode: "single", // 同时只能一块区域变色
                label: {
                    //显示各地方名称
                    normal: {
                        show: true,
                        textStyle: {
                            color: "#101010",
                            fontSize: 12,
                            // fontWeight:'bold',
                        },
                        //formatter:function(d){return d.name + '\n' + d.value;}
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: "#101010",
                            fontSize: 12,
                            // fontWeight:'bold'
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        borderColor: "rgb(85,155,240)",
                        borderWidth: 1,
                        shadowColor: "rgb(85,155,240)",
                        shadowBlur: 10,
                    },
                    emphasis: {
                        areaColor: "#B9D3EE", //修改区域hover效果
                    },
                },
                // data: [
                //   { name: "宣城市", value: 0.8 },
                //   { name: "芜湖市", value: 6.6 },
                //   { name: "蚌埠市", value: 1.7 },
                //   { name: "池州市", value: 1.3 },
                //   { name: "滁州市", value: 1.1 },
                //   { name: "安庆市", value: 1.2 },
                //   { name: "马鞍山市", value: 1.4 },
                //   { name: "淮南市", value: 3.0},
                //   { name: "亳州市", value: 0.5},
                //   { name: "六安市", value: 2.5},
                //   { name: "淮北市", value: 1.0},
                //   { name: "黄山市", value: 1.1},
                //   { name: "宿州市", value: 1.0},
                //   { name: "阜阳市", value: 1.9},
                //   { name: "合肥市", value: 17.1 },
                //   { name: "铜陵市", value: 1.2 },
                // ],
                data: cityData,
            },
        ],
    };
    return option;
}
const initBar = () => {
    if (barCharts.value == null) {
        barCharts.value = markRaw(echarts.init(BarBox.value));
    }
    barCharts.value.setOption(options1());
    window.addEventListener("resize", () => {
        barCharts.value.resize();
        map.value.resize();
    });
}
const initAnhuiMap = () => {
    map.value = markRaw(echarts.init(mapBox.value));
    map.value.setOption(options2());
    map.value.on("click", function (params) {
        console.log("params=", params.name);
        let cityInfo = maps.find((d) => {
            // _this.map = params.name;
            // _this.mapObj.setOption(_this.mapOptions);
            // _this.changeCity(params.name)
            // _this.flag = 0;
            return d.name === params.name;
        });
        console.log("cityInfo===", cityInfo);
        if (cityInfo == undefined) return;
        // console.log("-----------", params.name);
        cityValue.value = cityInfo.name;
        mapName.value = cityInfo.ping;
        // console.log(
        //     "_this.cityName_this.cityName_this.cityName",
        //     _this.cityName
        // );
        // console.log("-----cityInfo-", cityInfo);
        // _this.city = cityInfo.cityCode;
        // console.log("city==", _this.city);
        map.value.setOption(options2());
    })
}
const changeValue = (value) => {
    console.log("---cityValue-", cityValue.value);
    if (value == undefined || value == "") {
        mapName.value = "安徽";
    } else {
        let ll = maps.find((d) => d.name === value);
        console.log("ll===", ll);
        let mapPing = ll.ping;
        //将对应的ping 传递给this.map
        mapName.value = mapPing;
    }

    //重绘地图
    map.value.setOption(options2());
}
computed(() => {

})
onMounted(() => {
    setplus();
    // formatNumber()
    initBar();
    initAnhuiMap();
})
</script>
<style scoped lang="scss">
.right {
    /* width: 500px; */
    height: 100%;
    // min-width: 500px;
    // max-width: 800px;
    width: 100%;
    border: none !important;
}

.right_header {
    // min-width: 500px;
    // max-width: 800px;
    height: 38%;
    // height: 100%;
    width: 100%;
    background-image: url("@/assets/img/left1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
    z-index: 10000;
    padding-top: 1.625rem;
}

.title {
    padding: 0.2rem 0 0.2rem 1.3125rem;
    width: 10rem;
    /* height: 34px; */
    line-height: 1.5rem;
    /* text-align: center; */
    /* background: #ccc; */
    font-size: 1.25rem;
    position: relative;
    margin-left: 2.5625rem;
    background: linear-gradient(to right,
            rgba(2, 173, 245, 0.6),
            rgba(2, 173, 245, 0.1));
}

.title::before {
    content: "";
    width: 0.3125rem;
    height: 1.9rem;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(2, 173, 245);
}

//上访的数字
.title_body {
    display: flex;
    align-items: center;
    padding: 1.5rem 0 1.5rem 3.8rem;

    span {
        margin: 0 0.3rem;
        padding: 0.4rem 0.4rem;
        border: 0.125rem solid rgb(32, 72, 133);
        text-align: center;
        font-family: electronicFont;
        font-size: 1.8rem;
        transition: all 1s;
    }

    i {
        font-size: 1.8rem;
        font-family: electronicFont;
        letter-spacing: 0.3rem;
        color: rgb(69, 208, 252);
    }
}

// 上方的横向柱状图的盒子
.BarBox {
    width: 100%;
    // padding: 1.5rem 0 1.5rem 1.3125rem;
    height: 4rem;
    // height: 300px;
    //   background-color: rgb(197, 57, 57);
}

// 下方的安徽省box
.anHui {
    margin-top: 1.25rem;
    height: 50%;
    width: 100%;
    background-image: url("@/assets/img/left2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
    z-index: 999;
    padding-top: 1.625rem;
    position: relative;
}

.city_box {
    position: absolute;
    top: 26px;
    right: 10px;
    width: 14rem;
    z-index: 100001 !important;
}

.mapBox {
    width: 100%;
    height: 90%;
    // background-color: #fff;
}
</style>